<template>
  <div class="stitle">· 导入常用进攻 ·</div>
  <div class="_box0">
    <div class="_banr">
      <n-space>
        <template v-for="item in val.cyteam">
          <n-tag class="team_sstag" @click="val.v_editdata_atk = item.icon">{{
            item.name
          }}</n-tag>
        </template>
      </n-space>
    </div>
  </div>
  <div class="stitle">· 进攻队伍配置 ·</div>
  <div class="_box0">
    <div class="_banr" style="flex-direction: column; align-items: flex-start">
      <template v-for="(item, key) in val.v_editdata_atk">
        <div class="work_sp3" style="margin-bottom: 8px">
          <template v-if="key == 0">
            <span>队长：</span>
          </template>
          <template v-else>
            <span>队员：</span>
          </template>

          <el-select
            style="width: 180px"
            class="work_roleselect"
            :reserve-keyword="false"
            filterable
            placeholder="请选择或输入角色名"
            v-model="val.v_editdata_atk[key]"
          >
            <el-option
              v-for="(item, key) in $cfg.role"
              :label="item.bname + item.name"
              :value="item.icon"
            >
              <div
                style="
                  display: flex;
                  align-items: center;
                  margin-top: 3px;
                  margin-bottom: 3px;
                "
              >
                <img class="workairole" :src="$cfg.function.ava(item.icon)" />
                <span>　{{ item.name }}</span>
              </div>
            </el-option>
          </el-select>

          <div class="dfc" v-if="val.v_editdata_atk[key]">
            <img :src="$cfg.function.ava(val.v_editdata_atk[key])" />
          </div>
        </div>
      </template>
    </div>
  </div>
  <div class="stitle">· 防守队伍配置 ·</div>
  <div class="_box0">
    <div class="_banr" style="flex-direction: column; align-items: flex-start">
      <template v-for="(item, key) in val.v_editdata">
        <div class="work_sp3" style="margin-bottom: 8px">
          <template v-if="key == 0">
            <span>队长：</span>
          </template>
          <template v-else>
            <span>队员：</span>
          </template>

          <el-select
            style="width: 180px"
            class="work_roleselect"
            :reserve-keyword="false"
            filterable
            placeholder="请选择或输入角色名"
            v-model="val.v_editdata[key]"
          >
            <el-option
              v-for="(item, key) in $cfg.role"
              :label="item.bname + item.name"
              :value="item.icon"
            >
              <div
                style="
                  display: flex;
                  align-items: center;
                  margin-top: 3px;
                  margin-bottom: 3px;
                "
              >
                <img class="workairole" :src="$cfg.function.ava(item.icon)" />
                <span>　{{ item.name }}</span>
              </div>
            </el-option>
          </el-select>

          <div class="dfc" v-if="val.v_editdata[key]">
            <img :src="$cfg.function.ava(val.v_editdata[key])" />
          </div>
        </div>
      </template>
    </div>
  </div>
  <n-space justify="center">
    <n-button type="warning" @click="ct.updwork()">确认上传</n-button>
  </n-space>
  <br />
</template>

<script>
import { cfg } from "@/cfg/cfg.js";
export default {
  props: {
    val: {
      required: true,
    },
    ct: {
      required: true,
    },
  },
  setup(props) {
    let { ct, val } = props;
    //上传44作业
    ct.updwork = () => {
      const { v_editdata_atk: atk_team, v_editdata: def_team } = val;

      for (let i = 0; i < def_team.length; i++) {
        if (def_team[i] == null) {
          cfg.msg.error(`防守方第${i + 1}个角色未选择`);
          return false;
        }
        // 检查def_team数组是否存在重复的字符串，存在则返回错误，如果是null则跳过
        if (def_team[i] != null) {
          for (let j = 0; j < def_team.length; j++) {
            if (def_team[i] == def_team[j] && i != j) {
              cfg.msg.error(`防守方第${i + 1}个角色与第${j + 1}个角色重复`);
              return false;
            }
          }
        }

        if (atk_team[i] == null) {
          cfg.msg.error(`进攻方第${i + 1}个角色未选择`);
          return false;
        }

        // 检查def_team数组是否存在重复的字符串，存在则返回错误，如果是null则跳过
        if (atk_team[i] != null) {
          for (let j = 0; j < atk_team.length; j++) {
            if (atk_team[i] == atk_team[j] && i != j) {
              cfg.msg.error(`进攻方第${i + 1}个角色与第${j + 1}个角色重复`);
              return false;
            }
          }
        }
      }

      if (atk_team.length < 4 || def_team.length < 4) {
        cfg.msg.error("请选择4个角色");
      }

      //ok开始上传
      cfg.axios
        .get(`${cfg.url}`, {
          params: {
            t: "get/work/up_pvpwork",
            atk: atk_team,
            def: def_team,
            authkey: cfg?.user?.authkey,
          },
        })
        .then((res) => {
          let data = res.data;
          if (data.code != 0) {
            cfg.msg.error(data.msg, { duration: 2e3 });
          } else {
            cfg.msg.success(data.msg, { duration: 2e3 });
          }
        })
        .catch((err) => {
          cfg.msg.error(`未知错误：${err.message}`, { duration: 2e3 });
        });
    };
    return {};
  },
};
</script>
